<template>
    <!--头部搜索栏-->
    <el-card>
        <el-form :model="form" inline>
            <el-row>
                <el-col :span="10">
                    <el-form-item label="地址：">
                        <el-cascader v-model="selectedVillage"
                                     :options="villageOptions"
                                     clearable
                                     :props="props1"
                                     @change="handleCascaderChange"
                                     style="width: 400px"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="姓名：">
                        <el-input v-model="form.farmerName" placeholder="" />
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="证件：">
                        <el-input v-model="form.IDcard" placeholder="" />
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="贫困等级：">
                        <el-select
                                v-model="form.poorlevel"
                                placeholder="Select"
                                size="medium"
                                style="width: 180px"
                        >
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-col>
                <el-form-item >
                    <el-button type="success" @click="searchClick">查询</el-button>
                </el-form-item>
                <el-form-item >
                    <el-button type="primary" @click="resetClick">重置</el-button>
                </el-form-item>
            </el-col>
        </el-form>
    </el-card>

    <el-card style="height: 400px; margin-top: 20px">
    <!--列表主体-->
    <div class="table-container" style="display: flex; flex-direction: column;">
        <el-table :data="tableData" stripe border class="center-table" style="margin-top:20px;">
            <el-table-column prop="applyid" label="申请编号" width="100"/>
            <el-table-column prop="farmerName" label="姓名" width="100"/>
            <el-table-column prop="idCard" label="身份证号" width="200"/>
            <el-table-column prop="cityName" label="市" width="100"/>
            <el-table-column prop="poorLevel" label="贫困等级" width="100"/>
<!--            <el-table-column label="贫困等级" width="95">-->
<!--                <template v-slot:default="scope">-->
<!--                    <span v-if="scope.row.poorLevel === 0">不贫困</span>-->
<!--                    <span v-else-if="scope.row.poorLevel === 1">一般贫困</span>-->
<!--                    <span v-else-if="scope.row.poorLevel === 2">中等贫困</span>-->
<!--                    <span v-else-if="scope.row.poorLevel === 3">特殊贫困</span>-->
<!--                    <span v-else>未知等级</span>-->
<!--                </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column prop="medicare" label="医保情况" width="92"/>-->
            <el-table-column prop="water" label="水利情况" width="92"/>
            <el-table-column prop="housing" label="住房情况" width="92"/>
            <el-table-column prop="emergency" label="紧急灾难" width="92"/>
            <el-table-column prop="health" label="健康情况" width="92"/>
            <el-table-column prop="educate" label="教育情况" width="92"/>
            <el-table-column prop="state" label="审批情况" width="100"/>
            <el-table-column prop="helpMoney" label="帮扶情况" width="100"/>
            <el-table-column fixed="right" label="操作" width="100">
                <template #default="scope">
                    <el-button size="small" type="primary" @click="detailClick(scope.row.applyid)" plain>
                        详细信息
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--弹窗显示详细信息-->
        <el-dialog v-model="dialogTableVisible" width="500">
            <el-collapse v-model="activeNames" @change="handleChange">
                <el-collapse-item title="申请信息" name="1">
                    <template #title>
                        <h3>申请信息</h3>
                    </template>
                    <el-form>
                        <el-row>
                            <el-col style="text-align: right" :span="3">
                                <el-text>申请编号：</el-text>
                                <br>
                                <el-text>姓名：</el-text>
                                <br>
                                <el-text>身份证号：</el-text>
                                <br>
                                <el-text>地区：</el-text>
                                <br>
                                <el-text>贫困情况：</el-text>
                                <br>
                                <el-text>风险点：</el-text>
                                <br>
                            </el-col>
                            <el-col :span="20">
                                <el-text>{{detailedData.applyid}}</el-text>
                                <br>
                                <el-text>{{detailedData.farmerName}}</el-text>
                                <br>
                                <el-text>{{detailedData.idCard}}</el-text>
                                <br>
                                <el-text>
                                    {{detailedData.cityName}}{{detailedData.countyName}}{{detailedData.townName}}{{detailedData.villageName}}
                                </el-text>
                                <br>
                                <el-text>{{detailedData.poorLevel}}</el-text>
                                <br>
                                <el-text>{{detailedData.medicare}} / {{detailedData.water}} / {{detailedData.housing}} / {{detailedData.emergency}} / {{detailedData.medicare}} / {{detailedData.medicare}}</el-text>
                                <br>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-collapse-item>
                <el-collapse-item name="2" :disabled="disable1">
                    <template #title>
                        <h3>审批情况：</h3>
                        <el-text :type="color1">{{stateJudge}}</el-text>
                    </template>
                    <div>
                        <!--审批时间线-->
                        <el-timeline style="max-width: 600px">
                            <el-timeline-item
                                    v-for="(activity, index) in activities"
                                    :key="index"
                                    :color="activity.color"
                                    :timestamp="activity.timestamp"
                            >
                                {{ activity.content }}
                            </el-timeline-item>
                        </el-timeline>
                    </div>
                </el-collapse-item>
                <el-collapse-item name="3" :disabled="disable2">
                    <template #title>
                        <h3>帮扶情况：</h3>
                        <el-text :type="color2">{{helpJudge}}</el-text>
                    </template>
                    <el-form>
                        <el-row>
                            <el-col style="text-align: right" :span="4">
                                <el-text>帮扶人：</el-text>
                                <br>
                                <el-text>帮扶资金：</el-text>
                                <br>
                                <el-text>帮扶措施：</el-text>
                            </el-col>
                            <el-col :span="20">
                                <el-text>{{detailedData.helpMan}}</el-text>
                                <br>
                                <el-text>{{detailedData.helpMoney}}</el-text>
                                <br>
                                <el-text>{{detailedData.helpMeasure}}</el-text>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-collapse-item>
            </el-collapse>
        </el-dialog>
        <!--分页显示-->
        <div style="display: flex; justify-content: flex-end;margin-top: 20px;">
            <el-pagination
                    :background=true
                    v-model:total="totalCount"
                    v-model:page-size="form.pageSize"
                    :small=false
                    :page-sizes="[5, 10, 20, 50]"
                    @size-change="handleSizeChange"
                    layout="sizes, prev, pager, next, jumper"
                    @current-change="changePageNumber"/>
        </div>
    </div>
    </el-card>
</template>

<script setup>
    import {reactive, ref, onMounted, watch, computed} from 'vue'
    import {searchPage} from "@/api/applypoor";
    import villageData from "@/assets/village.json";

    const tableData = ref([]);
    const detailedData = ref(null);
    const villageOptions = villageData;
    const selectedVillage = ref([]);
    var requestData = ref([]);
    const totalCount = ref(10);
    const options = [
        {
            value: '0',
            label: '不贫困',
        },
        {
            value: '1',
            label: '一般贫困',
        },
        {
            value: '2',
            label: '中等贫困',
        },
        {
            value: '3',
            label: '特殊贫困',
        }
    ]
    //------------基础信息替换----------------
    //状态判断
    const stateJudge  = computed(() => {
        switch (detailedData.value.state) {
            case "0":
                return "不通过";
            case "1":
                return "等待村级审批";
            case "2":
                return "等待乡级审批";
            case "3":
                return "等待县级审批";
            case "4":
                return "等待市级审批";
            case "5":
                return "等待省级审批";
            case "6":
            case "7":
                return "审批通过";
            default:
                return "未知状态";
        }
    });
    const helpJudge = computed(() => {
        const state=detailedData.value.state
        if (state == "0") {//打回
            activeNames.value = ['1']
            disable1.value = true
            disable2.value = true
            color1.value = "danger"
            color2.value = "danger"
            return  "未安排帮扶"
        } else if (state == "6") {//已经指派帮扶人
            activeNames.value = ['1', '2']
            disable1.value = false
            disable2.value = true
            color1.value = "warning"
            color2.value = ""
            return "等待安排帮扶"
        } else if (state == "7") {//已经指派帮扶人
            activeNames.value = ['1', '2','3']
            disable1.value = false
            disable2.value = false
            color1.value = "success"
            color2.value = "success"
            return "已安排帮扶"
        } else {
            activeNames.value = ['1', '2']
            disable1.value = false
            disable2.value = true
            color1.value = "warning"
            color2.value = ""
            return "未安排帮扶"
        }
    });
    // const poorLevelJudge = computed(() => {
    //     switch (form.poorLevel) {
    //         case "0":
    //             return "不贫困";
    //         case "1":
    //             return "一般贫困";
    //         case "2":
    //             return "贫困";
    //         case "3":
    //             return "特殊贫困";
    //         default:
    //             return "未知状态";
    //     }
    // });

    //------------查询----------------
    //任意级地区查询
    const props1 = {
        checkStrictly: true,
    }
    //查询数据
    const area_data = () => {
        request_params.pageNum = form.pageNum
        request_params.pageSize = form.pageSize
        request_params.farmerName = form.farmerName;
        request_params.idCard = form.IDcard;
        request_params.poorLevel = form.poorLevel;
        for (let i = 0; i < requestData.value.length; i++) {
            switch (i) {
                case 0:
                    request_params.cityName = requestData.value[i]['label']
                    break;
                case 1:
                    request_params.countyName = requestData.value[i]['label']
                    break;
                case 2:
                    request_params.townName = requestData.value[i]['label']
                    break;
                case 3:
                    request_params.villageName = requestData.value[i]['label']
                    break;
            }
        }
    }

    const request_params = {
        farmerName: '',
        idCard: '',
        cityName: '',
        countyName: '',
        townName: '',
        villageName: '',
        poorLevel: '',
        pageNum: 1,
        pageSize: 10
    }
    //分页
    const form = reactive({
        farmerName: '',
        IDcard: '',
        poorLevel:'',
        pageNum: 1,
        pageSize: 10
    })
    const searchClick = ((res) => {
        console.log(request_params)
        myPage();
    });
    const handleCascaderChange = (value, selectedLabels) => {
        if (value == null) {
            return;
        }
        requestData.value = value.map((val, index) => ({
            label: findLabelByValue(val, villageOptions), // 查找并添加对应的label
        }));
        console.log(selectedVillage.value);
    };

    // 辅助函数：根据value查找label
    const findLabelByValue = (targetValue, options) => {
        for (const option of options) {
            if (option.value === targetValue) {
                return option.label;
            }
            if (option.children) {
                const foundLabel = findLabelByValue(targetValue, option.children);
                if (foundLabel) {
                    return foundLabel;
                }
            }
        }
        return null;
    };
    onMounted(() => {
        myPage();
    });
    const changePageNumber = (pageNum) => {
        form.pageNum = pageNum;
        myPage();
    }
    const handleSizeChange = () => {
        myPage();
    }
    const myPage = () => {
        area_data();
        searchPage(request_params).then((res) => {
            console.log(111)
            console.log(request_params)
            console.log(res)
            tableData.value = res.data.list;
            // console.log(tableData.value)
            totalCount.value = res.data.total;
        });

    }
    //重置按钮
    const resetClick = () => {
        request_params.pageNum = form.pageNum;
        request_params.pageSize = form.pageSize;
        request_params.farmerName = '';
        request_params.idCard = '';
        request_params.poorLevel='';
        request_params.cityName = '';
        request_params.countyName = '';
        request_params.townName = '';
        request_params.villageName = '';
        // request_params.poorLevel = '';
        searchPage(request_params).then((res) => {
            // console.log(res)
            tableData.value = res.data.list;
            totalCount.value = res.data.total;
        });
    }

    //------------详细信息----------------
    // 弹窗控制
    let dialogTableVisible = ref(false)

    //伸缩展示
    const activeNames = ref(['1', '2', '3'])
    let disable1 = ref(false)
    let disable2 = ref(false)
    let color1 = ref('')
    let color2 = ref('')
    //详细信息初始化
    const detailClick = (ID) => {
        dialogTableVisible.value = true;
        detailedData.value = tableData.value.find(item => item.applyid === ID);
    }
    //时间线
    const activities = computed(() => [
        {
            content: '村级审批',
            timestamp: detailedData.value.state > '1' ?detailedData.value.villageTime:"",
            color: detailedData.value.state > '1' ? '#0bbd87' : ''
        },
        {
            content: '乡级审批',
            timestamp: detailedData.value.state > '2' ?detailedData.value.townTime:"",
            color: detailedData.value.state > '2' ? '#0bbd87' : ''
        },
        {
            content: '县级审批',
            timestamp: detailedData.value.state > '3' ?detailedData.value.countyTime:"",
            color: detailedData.value.state > '3' ? '#0bbd87' : ''
        },
        {
            content: '市级审批',
            timestamp: detailedData.value.state > '4' ?detailedData.value.cityTime:"",
            color: detailedData.value.state > '4' ? '#0bbd87' : ''
        },
        {
            content: '省级审批',
            timestamp: detailedData.value.state > '5' ?detailedData.value.provinceTime:"",
            color: detailedData.value.state > '5' ? '#0bbd87' : ''
        }
    ]);

</script>

<style scoped>

    :deep(.center-table td),
    :deep(.center-table th) {
        text-align: center !important;
    }
</style>